<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue'
import { useMessage } from 'naive-ui'
import { useCopy, usePaginate } from '@na/utils'
import { getLocalIcons } from '@/styles'
import biIcons from '@/styles/assets/bi.json'
import mdiIcons from '@/styles/assets/mdi.json'
import { useApp } from '@/themes'
type Preset = {
  prefix: string
  label: string
  icons: string[]
}

interface Props {
  showName?: boolean
  showCopy?: boolean
  pageSize?: number
  presets?: Preset[]
  customLabel?: string
}

const props = withDefaults(defineProps<Props>(), {
  showName: false,
  showCopy: false,
  prefix: 'local',
  presets: () => {
    const localIcons = getLocalIcons()
    return [
      { label: '本地图标', prefix: 'local', icons: Object.keys(localIcons.icons) },
      { label: 'bootstrap图标', prefix: 'bi', icons: biIcons },
      { label: 'mdi图标', prefix: 'mdi', icons: mdiIcons },
    ]
  },
})
const modelValue = defineModel<string>({
  default: '',
})
const prefix = defineModel<string>('prefix', {
  default: 'local',
})
const { isMobile } = useApp()

const search = ref('')
const options = computed<Preset[]>(() => props.presets || [])
const optionIndex = computed(() => options.value.findIndex((option: any) => option.prefix === prefix.value))
const icons = ref<Record<string, any>>({})
const mdiIconsList = computed(() => icons.value[prefix.value]?.items)
const pageSize = computed(() => {
  if (props.pageSize) {
    return props.pageSize
  }
  return isMobile.value ? 48 : props.showName ? 50 : 98
})
const total = computed(() => icons.value[prefix.value]?.total || 0)
const page = computed(() => icons.value[prefix.value]?.page || 1)
const pageCount = computed(() => Math.ceil(total.value / pageSize.value))

onBeforeMount(() => {
  if (options.value.length) {
    options.value.forEach((option: any) => {
      const res = usePaginate(option.icons, page.value, pageSize.value)
      icons.value[option.prefix] = {
        page: page.value,
        ...res,
      }
    })
  }
})

const message = useMessage()

const { onCopy } = useCopy(modelValue)

const onCopyClick = (icon: string) => {
  modelValue.value = `${prefix.value}:${icon}`
  if (props.showCopy) {
    onCopy().then(() => {
      message.success(`复制成功: ${modelValue.value}`)
    })
  }
}

const onPageChange = (currentPage: number) => {
  if (options.value.length) {
    const option = options.value[optionIndex.value]
    const res = usePaginate(option.icons, currentPage, pageSize.value)
    icons.value[option.prefix].page = currentPage
    icons.value[option.prefix].total = res.total
    icons.value[option.prefix].items = res.items
  }
}
</script>

<template>
  <n-card class="icon-panel" header-class="p-2!" content-class="p-0!" footer-class="p-2!" :bordered="true">
    <template v-if="options" #header>
      <div class="flex-start gap-2" :class="{ 'flex-col': isMobile }">
        <segmented v-model="prefix" :options="options" value-field="prefix"></segmented>
        <n-input v-model:value="search" class="w-200px!" placeholder="请输入图标名称搜索" clearable></n-input>
      </div>
    </template>
    <auto-animate>
      <template v-for="option in options" :key="option.prefix">
        <n-card v-if="prefix === option.prefix" content-class="p-2!" :bordered="false">
          <div v-if="mdiIconsList.length" class="flex-start flex-wrap gap-1">
            <template v-for="icon in mdiIconsList" :key="icon">
              <n-button :type="modelValue === `${prefix}:${icon}` ? 'primary' : 'default'" class="h-auto p-2" @click="onCopyClick(icon)">
                <div class="flex-y-center">
                  <n-ellipsis v-if="showName && !isMobile" style="width: 75px; font-size: 12px" :tooltip="{ placement: 'bottom' }">
                    {{ icon }}
                  </n-ellipsis>
                  <w-icon class="cursor-pointer" :size="showName || isMobile ? 20 : 21" :icon="`${prefix}:${icon}`"></w-icon>
                </div>
              </n-button>
            </template>
          </div>
          <n-empty v-else description="暂无数据"></n-empty>
        </n-card>
      </template>
    </auto-animate>
    <template #footer>
      <n-pagination :page="page" :page-count="pageCount" :simple="isMobile" @update:page="onPageChange"></n-pagination>
    </template>
  </n-card>
</template>

<style lang="scss" scoped>
.icon-panel {
  width: 590px;
  max-width: 85vw;
}
</style>
